<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <title>Commuter Connect: Reported Issue</title>
        <link href="css/bootstrap.css" rel="stylesheet">
        <link href="css/common.css" rel="stylesheet">
        <style type="text/css">
            html { height: 100% }
            body { height: 100%; margin: 0; padding: 0 }
            * { box-sizing: border-box; }
            #topBanner {
            }
            #previewImage {
                display: none;
                width: 250px;
                height: 250px;
            }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"> </script>
        <script type="text/javascript" src="js/newReport.js"> </script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
        <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
        <script type="text/javascript" src="/js/fileupload5.0.2/jquery.fileupload.js"></script>
        <script type="text/javascript" src="/js/fileupload5.0.2/jquery.fileupload-ui.js"></script> 
    </head>
    <body>
      <h3 id="topBanner">
        <div class="logo">
          <div class="line1">Commuters</div>
          <div class="line2">Connect</div>
        </div>
      </h3>

        <div id="newReport" class="lift:newReport">
            <div class="lift:msgs?showAll=true"></div>
            <form action="/report/3/attachImage" method="POST"
                enctype="multipart/form-data" class="lift:form.ajax">
            <label>
                Subject
                <input type="text" name="subject" id="subject" placeholder="What happened?" />
            </label>
            <div class="fileupload-buttonbar">
                <span class="fileinput-button">
                    <span>Choose file...</span>
                    <input type="file" name="files" />
                </span>
            </div>
            <div class="fileupload-content">
                <table class="files">
                    <tbody></tbody>
                </table>
                <div class="fileupload-progressbar"></div>
            </div>
            <input type="hidden" value="not set." name="ajaxUploadId"/>
            <label>
                Location
                <input type="text" name="location" id="location" placeholder="Where?"/>
            </label>
            <img id="previewImage" alt="image of enterred location" />
            <label>
                <textarea name="text" id="text" placeholder="Anything you'd like to add?"></textarea>
            </label>
            <input type="submit" class="btn" name="create" value="Create"/>
        </form>
        </div>

        <tail>

        <script id="template-upload" type="text/x-jquery-tmpl">
          <tr class="template-upload{{if error}} ui-state-error{{/if}}">
            <td class="preview"></td>
            <td class="name">${name}</td>
            <td class="size">${sizef}</td>
            {{if error}}
            <td class="error" colspan="2">Error:
              {{if error === 'maxFileSize'}}File is too big
              {{else error === 'minFileSize'}}File is too small
              {{else error === 'acceptFileTypes'}}Filetype not allowed
              {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
              {{else}}${error}
              {{/if}}
            </td>
            {{else}}
            <td class="progress"><div></div></td>
            <td class="start"><button>Start</button></td>
            {{/if}}
            <td class="cancel"><button>Cancel</button></td>
          </tr>
        </script>
        <script id="template-download" type="text/x-jquery-tmpl">
          <tr class="template-download{{if error}} ui-state-error{{/if}}">
            {{if error}}
            <td></td>
            <td class="name">${name}</td>
            <td class="size">${sizef}</td>
            <td class="error" colspan="2">Error:
              {{if error === 1}}File exceeds upload_max_filesize (php.ini directive)
              {{else error === 2}}File exceeds MAX_FILE_SIZE (HTML form directive)
              {{else error === 3}}File was only partially uploaded
              {{else error === 4}}No File was uploaded
              {{else error === 5}}Missing a temporary folder
              {{else error === 6}}Failed to write file to disk
              {{else error === 7}}File upload stopped by extension
              {{else error === 'maxFileSize'}}File is too big
              {{else error === 'minFileSize'}}File is too small
              {{else error === 'acceptFileTypes'}}Filetype not allowed
              {{else error === 'maxNumberOfFiles'}}Max number of files exceeded
              {{else error === 'uploadedBytes'}}Uploaded bytes exceed file size
              {{else error === 'emptyResult'}}Empty file upload result
              {{else}}${error}
              {{/if}}
            </td>
            {{else}}
            <td class="preview">
              {{if thumbnail_url}}
              <a href="${url}" target="_blank"><img src="${thumbnail_url}"></a>
              {{/if}}
            </td>
            <td class="name">
              ${name}
            </td>
            <td class="size">${sizef}</td>
            <td colspan="2"></td>
            {{/if}}
          </tr>
        </script>
        </tail>

    </html>
